<template>
	<div style="width: 95%;margin: 0 auto;">
		<el-dialog v-model="showEdit" width="450px" :title="EditTitle">
			<template #footer>
				<el-row >
					<label style="line-height: 30px;width: 50px">ID：</label>
					<el-input style="width: 80%;" v-model="obj.id" readonly></el-input>
				</el-row>
				<el-row style="margin: 20px 0;">
					<label style="line-height: 30px;width: 50px">类型：</label>
					<el-input style="width: 80%;" v-model.lazy.trim="obj.type"></el-input>
				</el-row>
				<span class="dialog-footer">
					<el-button @click="showEdit=false">取消</el-button>
					<el-button type="primary" @click="add()">{{state==0?'浏览中 更新':state==1?'更新 提交':state==2?'添加 提交':''}}</el-button>
				</span>
			</template>
		</el-dialog>
		<el-row justify="space-between" style="margin-top: 2rem;">
			<el-col :span="10"><h1>类型管理</h1></el-col>
			<el-col :span="2">
				<el-button type="success" @click="toadd()">添加</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-table :data="types" style="width: 100%;" :border="true">
				<el-table-column label="ID" prop="id"/>
				<el-table-column label="类型" prop="type"/>
				<el-table-column label="功能" width="100" align="center">
					<template #default="scope">
						<el-button size="small"
							@click="update(scope.row.id)">修改
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
	</div>
</template>

<script>
export default{
	name:'Type',
	data(){
		return {
			showEdit:false,
			EditTitle:'类型信息',
			state:0,
			obj:{
				id:0,
				type:''
			},
			types:[]
		}
	},
	methods:{
		update(id){
			this.EditTitle = '修改类型';
			this.showEdit = true;
			this.state = 1;
			for(let item of this.types){
				if(item.id === id){
					this.obj = item;
				}
			}
		},
		toadd(){
			this.EditTitle = '添加类型';
			this.showEdit = true;
			this.state = 2;
			this.obj = {id:0,type:''};
		},
		add(){
			//state=1:更新 state=2：添加
			if(this.state==1 && this.obj.type || this.state==2 && this.obj.type){
				//提交数据
				let data = {
					id : this.obj.id,
					type : this.obj.type,
					pid: 0,
					prio: 100,
					isdel: 0
				}
				this.axios.post('/api/adm/type/add',this.$qs.stringify(data)).then((res)=>{
					if(res.status==200){
						let newTypes = [];
						for(let item of res.data.data){
							//只显示一级菜单的数据
							if(item.pid==0){
								newTypes.push(item)
							}
						}
						this.types = newTypes;
					}
					this.state = 0;
					this.showEdit = false;
					this.obj = {id:0,type:''}
				}).catch((err)=>{
					//console.log(err);
				});
			}
		}
	},
	created() {
		this.axios.get('/api/adm/type/findAll').then((res)=>{
			if(res.status==200){
				this.types = res.data.data;
			}else{
				alert("请求异常！")
			}
		}).catch((err)=>{
			//console.log(err);
		});
	}
}
</script>

<style>
</style>
